<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.SeeDialogVisible"
           @cancel="closeDialog"
           @ok="closeDialog"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <vue-form>
            <div class="row">
                <div class="col-xs-12">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td>公众号名称</td><td>{{model.wechats.nick_name}}</td>
                            </tr>
                            <tr>
                                <td>发送类型</td><td>{{$store.state.replyTypeList[model.type]}}</td>
                            </tr>
                            <tr>
                                <td>内容</td>
                                <td v-show="model.type ==1">{{model.content}}</td>
                                <td v-show="model.type ==2" v-if="model.img!=null">
                                    <div class="ibox phone-art">
                                        <div class="ibox-content product-box active">

                                            <div class="product-imitation center-block">
                                                <img alt="图片" class="img-rounded img-lg center-block" :src="model.img.imgPath">
                                            </div>
                                            <div class="product-desc ">
                                                <a href="javascript:;"  class="product-name content-title"> {{model.img.imgName}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td v-show="model.type ==3" v-if="model.art!=null">
                                    <div class="col-xs-12" v-if="item == ''">
                                        <div class="ibox phone-art">
                                            <div class="ibox-content product-box active">
                                                <div class="product-imitation center-block hand-menu-con" v-on:click="seeItem(model.art.contexts[0])">
                                                    <img alt="图片" class="img-responsive center-block" :src="urlCheck(model.art.contexts[0].thumb_url)">
                                                </div>
                                                <div class="product-desc ">
                                <span class="product-price content-title hand-menu-con" v-on:click="seeItem(model.art.contexts[0])">
                               {{model.art.contexts[0].title}}
                                </span>
                                                    <div class="small m-t-xs hand-menu-con" v-for="(context,key) in model.art.contexts">
                                                        <div class="row" v-if="key != 0" v-on:click="seeItem(context)">
                                                            <div class="col-xs-8 ">
                                                                <h4 class="content-title" >{{context.title}}</h4>
                                                            </div>
                                                            <div class="col-xs-4">
                                                                <img class="img-responsive" :src="urlCheck(context.thumb_url)">
                                                                <!--<i class="default">缩略图</i>-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12" v-if="item != ''">
                                        <div class="wx_phone_preview_appmsg phone-art">
                                            <div class="rich_media">
                                                <h2 class="rich_media_title">{{item.title}}</h2>
                                                <div class="rich_media_meta_list">
                                                    <em class="rich_media_meta rich_media_meta_text">{{item.author}}</em>
                                                    <em class="rich_media_meta rich_media_meta_text">{{item.created_at}}</em>
                                                    <span class="rich_media_meta rich_media_meta_link hand-menu-con pull-right " v-on:click="unsetItem()" title="请发送到手机查看完整效果">返回</span>
                                                </div>
                                                <div class="rich_media_thumb_wrp" v-if="item.show_cover_pic ==0">
                                                    <img class="rich_media_thumb" :src="item.thumb_url" alt="">
                                                </div>
                                                <div class="rich_media_content" v-html="item.content">
                                                    {{item.content}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td v-show="model.type ==4" v-if="model.voice!=null">
                                    <div class="ibox phone-art">
                                        <div class="ibox-content product-box active">

                                            <div class="product-imitation center-block">
                                                <!--[{{props.item.voiceName}}]-->
                                                <i class="glyphicon glyphicon-music center-block"></i>
                                                <audio  controls="controls"  style="width: 100px;height: 40px" class="center-block" :src="model.voice.voicePath">

                                                </audio>
                                            </div>
                                            <div class="product-desc ">
                                                <a href="javascript:;"  class="product-name content-title"> {{model.voice.voiceName}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td v-show="model.type ==5" v-if="model.video!=null">
                                    <div class="ibox phone-art">
                                        <div class="ibox-content product-box active">
                                            <div class="product-imitation center-block">
                                                <a  target="_blank" :href="model.video.videoPath">
                                                    <video height="150px" :src="model.video.videoPath"></video>
                                                </a>
                                            </div>
                                            <div class="product-desc ">
                                                <a href="javascript:;"  class="product-name content-title"> {{model.video.videoTitle}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="model.status !=0">
                                <td>审批结果</td>
                                <td>
                                    {{type[model.check_status]}}
                                </td>
                            </tr>
                            <tr v-if="model.status !=0">
                                <td>审批意见</td>
                                <td>{{model.reply}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </vue-form>
    </modal>


</template>
<style scoped>
    .phone-art{
        width: 300px;
    }
    .product-imitation{
     padding: 0px;
    }
    .product-imitation{
        padding: 10px;
    }
</style>
<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                item:'',
                type:{"2":"审批通过","3":"审批驳回"},
                status:"2",
                reply:'',
                model: this.$modelDataSource({
                    url: 'api/WeChat/MyMassLog',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        type:'',
                        content:'',
                        source_id:'',
                        reply:'',
                        check_status:1,
                        wechats:{},
                        art:{},
                        img:{},
                        voice:{},
                        video:{}
                    }
                })
            };
        },
        methods: {
            closeDialog: function () {
                this.item='';
                this.status = 2;
                this.reply = '';
                this.stateManager.SeeModelId = 0;
                this.stateManager.SeeDialogVisible = false;
            },
            seeItem:function (item) {
                this.item=item;
            },
            unsetItem(){
                this.item='';
            },
            urlCheck:function (url) {
                if(url){
                    return url
                }else{
                    return 'http://tjise.daxuefun.cn/images/failed.png'
                }
            },
        },
        computed: {
            modalTitle: function () {
                return '记录查看';
            }
        },
        watch: {
            'stateManager.SeeModelId': function (newValue) {
                this.model.fetch(newValue);
            },

        }
    }
</script>